<template>
  <div class="app-container-flex">
    <NewFullScreen
      v-model="showDialog"
      :title="title"
      :btnList="fullInfo.btnList"
    >
      <div class="model-panel">
        <div class="model-panel-title">
          <p>{{ $t('basic_information') }}</p>
        </div>
        <div class="model-panel-body">
          <page-form
            class="paddingBox order-model-formBox flex_wrap_start_start"
            v-model:ref-obj="formInfo.ref"
            :data="formInfo.data"
            :field-list="formInfo.fieldList"
            :label-width="formInfo.labelWidth"
            :rules="formInfo.rules"
          ></page-form>
        </div>
      </div>
    </NewFullScreen>
  </div>
</template>

<script setup name="quartzModify">
import { createScheduleJob, updateScheduleJob } from '@/api/schedule.js'
const emits = defineEmits()
const { proxy } = getCurrentInstance()
const props = defineProps(['visible', 'title', 'tableRow'])
// 表单相关
const formInfo = ref({
  ref: null,
  data: {},
  fieldList: [
    {
      label: '任务名称',
      value: 'jobName',
      type: 'input',
    },
    {
      label: '任务分组',
      value: 'jobGroup',
      type: 'input',
    },
    {
      label: 'cron表达式',
      value: 'cronExpression',
      type: 'input',
    },
    {
      label: '错失策略',
      value: 'missFire',
      type: 'select-model',
      code: 'miss_fire',
    },
    {
      label: '类型',
      value: 'beanType',
      type: 'select-model',
      code: 'quartz_bean_type',
    },
    { label: '类名', value: 'beanName', type: 'input' },
    {
      label: '方法名',
      value: 'methodName',
      type: 'input',
    },
    {
      label: '描述',
      value: 'description',
      type: 'textarea',
    },
  ],
  rules: {
    jobName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
    jobGroup: [{ required: true, message: '请输入任务分组', trigger: 'blur' }],
    cronExpression: [
      { required: true, message: '请输入cron表达式', trigger: 'blur' },
    ],
    beanName: [{ required: true, message: '请输入类名', trigger: 'blur' }],
    methodName: [{ required: true, message: '请输入方法名', trigger: 'blur' }],
    missFire: [
      { required: true, message: '请选择错失策略', trigger: 'change' },
    ],
    beanType: [{ required: true, message: '请选择类型', trigger: 'change' }],
  },
  labelWidth: '120px',
})
const fullInfo = ref({
  btnList: [{ label: '保存', event: save, show: true }],
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emits('update:visible', newValue) // 更新父组件shows
  },
})

onMounted(() => {
  if (props.tableRow.id) {
    formInfo.value.data = { ...props.tableRow }
  }
})

function save() {
  formInfo.value.ref.validate((valid) => {
    if (valid) {
      const api = props.tableRow.id ? updateScheduleJob : createScheduleJob
      api(formInfo.value.data).then((res) => {
        if (res.success) {
          showDialog.value = false
        }
      })
    }
  })
}
</script>

<style scoped></style>
